<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="/template/main.xhtml">
	
	<ui:define name="head">
		<style type="text/css">
			.yui-dt table {
				width:95%;
			}
			
			.label {
				width:20%;
				padding:4px;
			}

			.value {
				width:80%;
				padding:4px;
			}
			
			.grid {
				width:100%;
			}
		</style>
	</ui:define>
	
	<ui:define name="content">
	
		<h1><strong>New Book</strong></h1>
		
		<p:growl id="messages" showDetail="true"/>
		
		<h:form prependId="false">
		
         <p:panel header="Book Details" style="margin-top:10px">
         	<h:panelGrid id="detail" columns="2" styleClass="grid" columnClasses="label,value">
         		<h:outputText value="Title: *" />
         		<h:inputText id="title" value="#{createBookController.book.title}" required="true"/>
         		
         		<h:outputText value="Author: *" />
         		<h:inputText id="author" value="#{createBookController.book.author}" required="true"/>
         		
         		<h:outputText value="Pages: " />
         		<h:inputText id="pages" value="#{createBookController.book.pages}" />
         		
         		<h:outputText value="Publisher: *" />
         		<h:inputText id="publisher" value="#{createBookController.book.publisher}" required="true"/>
         		
         		<h:outputText value="ISBN: " />
         		<p:inputMask id="isbn" value="#{createBookController.book.isbn}" mask="9-99999-999-9"/>
         		
         		<h:outputText value="Rating: " />
         		<p:rating value="#{createBookController.book.rate}" />  
         		
         		<h:outputText />
         		<h:panelGroup>
         			<p:commandButton value="Reset" type="reset" async="false"/>
         			<p:commandButton value="Submit" actionListener="#{createBookController.save}" update="detail, messages"/>
         		</h:panelGroup>
         	</h:panelGrid>
         </p:panel>
         
       </h:form>
	</ui:define>
  
</ui:composition>